<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import RadioGroup from "./RadioGroup.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";
    import { Avatar } from "../Avatar";

    const { Story } = defineMeta({
        title: "Components/Form/RadioGroup",
        component: RadioGroup,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <RadioGroup
            data={[
                { label: "苹果", value: "1" },
                { label: "桃子", value: "2" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Space dir="v">
            <RadioGroup
                data={[
                    { label: "苹果", value: "1", disabled: true },
                    { label: "桃子", value: "2" },
                ]}
            />
            <RadioGroup
                {...args}
                data={[
                    { label: "苹果", value: "1" },
                    { label: "桃子", value: "2" },
                ]}
            />
        </Space>
    {/snippet}
</Story>

<Story name="CustomField" args={{ textField: "title", valueField: "id" }}>
    {#snippet template(args)}
        <RadioGroup
            {...args}
            data={[
                { title: "苹果", id: "1" },
                { title: "桃子", id: "2" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Stick">
    {#snippet template(args)}
        {#snippet stickItem(label: string)}
            <Space dir="v"><Avatar /><label>{label}</label></Space>
        {/snippet}
        {#snippet stickItem1()}{@render stickItem("苹果")}{/snippet}
        {#snippet stickItem2()}{@render stickItem("桃子")}{/snippet}
        {#snippet stickItem3()}{@render stickItem("香蕉")}{/snippet}
        <Space dir="v">
            <Space dir="h">
                <RadioGroup
                    stick
                    value={"1"}
                    data={[
                        { label: "苹果", value: "1" },
                        { label: "桃子", value: "2" },
                        { label: "香蕉", value: "3" },
                    ]}
                />
                <RadioGroup
                    disabled
                    stick
                    value={"1"}
                    data={[
                        { label: "苹果", value: "1" },
                        { label: "桃子", value: "2" },
                        { label: "香蕉", value: "3" },
                    ]}
                />
                <RadioGroup
                    stick
                    value={"1"}
                    data={[
                        { label: "苹果", value: "1" },
                        { label: "桃子", value: "2", disabled: true },
                        { label: "香蕉", value: "3" },
                    ]}
                />
            </Space>
            <Space dir="h">
                <RadioGroup
                    stick
                    value={"1"}
                    data={[
                        { label: stickItem1, value: "1" },
                        { label: stickItem2, value: "2" },
                        { label: stickItem3, value: "3" },
                    ]}
                />
            </Space>
            <Space dir="v">
                <RadioGroup
                    stick
                    block
                    value={"1"}
                    data={[
                        { label: "苹果", value: "1" },
                        { label: "桃子", value: "2" },
                        { label: "香蕉", value: "3" },
                    ]}
                />
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Extra">
    {#snippet template(args)}
        <div style="width: 250px">
            <RadioGroup
                type="card"
                value="3"
                data={[
                    { label: "苹果", value: "1", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "桃子", value: "2", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "香蕉", value: "3", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "猕猴桃", value: "4", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                ]}
            />
        </div>

        <div style="width: 250px">
            <RadioGroup
                type="pureCard"
                data={[
                    { label: "苹果", value: "1", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "桃子", value: "2", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "香蕉", value: "3", disabled: true, extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                    { label: "猕猴桃", value: "4", extra: "不断提高要求，延迟满足感，在更大范围里找最优解" },
                ]}
            />
        </div>
    {/snippet}
</Story>
